Containers, Rows, এবং Columns ব্যবহার

Flutter এ Container, Row, এবং Column হলো মৌলিক Widget যা অ্যাপের UI তৈরিতে বহুল ব্যবহৃত হয়। এগুলো ব্যবহার করে বিভিন্ন লেআউট এবং স্ট্রাকচার তৈরি করা যায়। নিচে প্রতিটি Widget এর ব্যবহার এবং উদাহরণ বিস্তারিতভাবে আলোচনা করা হলো।

১. Container Widget:

• Container একটি বহুমুখী Widget যা UI উপাদানগুলোকে লেআউট এবং স্টাইলিং করার জন্য ব্যবহৃত হয়। এটি মূলত একটি বক্স তৈরি করে যেখানে আপনি বিভিন্ন Widget রাখতে পারেন এবং বিভিন্ন স্টাইল অ্যাপ্লাই করতে পারেন।
• Container এ আপনি padding, margin, alignment, decoration, এবং size সেট করতে পারেন।

Container এর উদাহরণ:

Container(
  width: 200,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'Hello, Container!',
    style: TextStyle(color: Colors.white),
  ),
)

• এখানে একটি Container তৈরি করা হয়েছে যার প্রস্থ এবং উচ্চতা নির্ধারিত।
• margin এবং padding সেট করা হয়েছে।
• alignment দ্বারা টেক্সটকে মাঝখানে রাখা হয়েছে।
• decoration এর মাধ্যমে ব্যাকগ্রাউন্ড কালার এবং বর্ডার রেডিয়াস সেট করা হয়েছে।

২. Row Widget:

• Row Widget ব্যবহার করে একই লাইনে (horizontally) একাধিক Widget সাজানো যায়। এটি লম্বালম্বিভাবে (Horizontally) উপাদানগুলোকে প্লেস করে।
• Row Widget এর children প্রপার্টিতে একাধিক Widget প্রদান করা যায়। আপনি mainAxisAlignment এবং crossAxisAlignment প্রপার্টি ব্যবহার করে Row এর মধ্যে Widget গুলোর অবস্থান নিয়ন্ত্রণ করতে পারেন।

Row এর উদাহরণ:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, color: Colors.yellow),
    Text('Row Item 1'),
    ElevatedButton(onPressed: () {}, child: Text('Button')),
  ],
)

• mainAxisAlignment ব্যবহার করে Row এর মধ্যে উপাদানগুলোকে সমান দূরত্বে (spaceEvenly) রাখা হয়েছে।
• crossAxisAlignment ব্যবহার করে সব Widget এর মাঝখান বরাবর স্থাপন করা হয়েছে।
• Row এর মধ্যে একটি Icon, একটি Text এবং একটি ElevatedButton রাখা হয়েছে।

৩. Column Widget:

• Column Widget ব্যবহার করে উপরে থেকে নিচে (vertically) একাধিক Widget সাজানো যায়। এটি উপাদানগুলোকে উল্লম্বভাবে (Vertically) প্লেস করে।
• Column Widget এর children প্রপার্টিতে একাধিক Widget প্রদান করা যায় এবং mainAxisAlignment এবং crossAxisAlignment ব্যবহার করে Widget গুলোর অবস্থান নিয়ন্ত্রণ করা যায়।

Column এর উদাহরণ:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('Column Item 1'),
    SizedBox(height: 20),
    Text('Column Item 2'),
    ElevatedButton(onPressed: () {}, child: Text('Click Me')),
  ],
)

• mainAxisAlignment ব্যবহার করে Column এর মধ্যে Widget গুলোকে উল্লম্বভাবে মাঝখানে রাখা হয়েছে।
• crossAxisAlignment ব্যবহার করে উপাদানগুলোকে বাম দিক থেকে (start) শুরু করে রাখা হয়েছে।
• SizedBox ব্যবহার করে উপাদানগুলোর মধ্যে স্পেস তৈরি করা হয়েছে।
• Column এর মধ্যে দুটি Text এবং একটি ElevatedButton রাখা হয়েছে।

Containers, Rows, এবং Columns একসাথে ব্যবহার করা:

• Container একটি বক্স বা ঘের তৈরি করে, যেখানে আপনি Row এবং Column ব্যবহার করে বিভিন্ন উপাদান সাজাতে পারেন।
• Row এবং Column একই সাথে ব্যবহার করে একটি জটিল লেআউট তৈরি করা যায়।

উদাহরণ:

Container(
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(10),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('Item 1'),
          Icon(Icons.star, color: Colors.yellow),
        ],
      ),
      SizedBox(height: 20),
      Text('Another item below the row'),
      ElevatedButton(onPressed: () {}, child: Text('Press Me')),
    ],
  ),
)

• এখানে একটি Container এর মধ্যে একটি Column রাখা হয়েছে, যেখানে প্রথমে একটি Row এবং পরে অন্যান্য উপাদান রয়েছে।
• Row এ Text এবং Icon রাখা হয়েছে, যা এক লাইনে (Horizontally) প্লেস করা হয়েছে।
• Column এ SizedBox ব্যবহার করে দুই উপাদানের মধ্যে স্পেস তৈরি করা হয়েছে।
• শেষে একটি ElevatedButton রাখা হয়েছে।

সারাংশ:

• Container: একক UI উপাদান ঘের এবং স্টাইলিং করার জন্য ব্যবহৃত হয়।
• Row: একই লাইনে (Horizontally) একাধিক Widget সাজাতে ব্যবহৃত হয়।
• Column: উপরে থেকে নিচে (Vertically) একাধিক Widget সাজাতে ব্যবহৃত হয়।
• Containers, Rows, এবং Columns একত্রে ব্যবহার করে জটিল এবং রেসপন্সিভ UI লেআউট তৈরি করা যায়।